<template>
    <div class="retrieve">
        <div class="left-tree">
            <a-collapse @change="catalogChange" accordion>
                <a-collapse-panel
                    :key="item"
                    :header="item.catalogmc"
                    v-for="item in catalog.panelList"
                >
                    <div
                        class="retrieve-tree-son"
                        v-for="item1 in catalog.panelson"
                        :key="item1.id"
                        @click.stop="expand(item1)"
                    >
                        <span
                            :class="[
                                item1.open == true
                                    ? 'retrieve-tree-son-ac'
                                    : '',
                                'sp1',
                            ]"
                            :title="item1.title"
                        >
                            {{ item1.title }}
                        </span>
                        <ul class="retrieve-tree-son-wrap" v-show="item1.open">
                            <li
                                class="retrieve-tree-son-wrap-son"
                                v-for="son in item1.children"
                                :key="son.id"
                                :title="son.resourcemc"
                                @click.stop=""
                            >
                                <span>
                                    {{ son.resourcemc }}
                                </span>
                            </li>
                        </ul>
                    </div>
                </a-collapse-panel>
            </a-collapse>
        </div>
        <div class="right-content">
            <a-card style="margin-bottom: 10px">
                <a-form layout="inline" :model="catalog.FormData">
                    <a-form-item label="目录名称：">
                        <a-input
                            style="width: 200px"
                            v-model:value="catalog.FormData.resourcemc"
                        ></a-input>
                    </a-form-item>
                    <a-form-item>
                        <a-button
                            type="primary"
                            style="margin-right: 4px"
                            @click="Search"
                        >
                            搜索
                        </a-button>
                        <a-button @click="Reset"> 重置 </a-button>
                    </a-form-item>
                </a-form>
            </a-card>
            <div class="content-table">
                <div
                    class="table-item"
                    v-for="item in jbxxList.Data"
                    :key="item.id"
                    @click="Details(item)"
                >
                    <div class="title-box">
                        <div class="title-sp">{{ item.resourcemc }}</div>
                        <span class="title-fw col">{{
                            item.sharetypeName
                        }}</span>
                    </div>
                    <div class="content-Date">{{ item.publishdate }}</div>
                    <div class="content-box">
                        行政区划：<span>{{ item.xzqh }}</span
                        >所属部门：<span>{{ item.deptname }}</span
                        >注册时间：<span>{{ item.regdate }}</span
                        >资源目录：<span>{{ item.catalogName }}</span
                        >比例值：<span>{{ item.blName }}</span
                        >分辨率：<span>{{ item.fblName }}</span
                        >坐标系：<span>{{ item.zbxName }}</span>
                        <!-- 参考类型：<span>{{ item.cklxName }}</span> -->

                        <!-- 存储类型：<span>{{ item.resourcelx }}</span> -->
                    </div>
                    <span class="tags-box">
                        {{ item.keyword }}
                    </span>
                </div>
            </div>
            <div class="content-page">
                <a-pagination
                    :page-size="20"
                    v-model="catalog.FormData.pageNo"
                    :total="catalog.FormData.rows"
                    @change="pageChange"
                />
            </div>
        </div>
    </div>
</template>

<script>
import * as API from "@/api/data-object";
import { useStore } from "@/store";
import WForm from "../../componets/wForm.vue";
import { buildtree1 } from "../../utils";
export default {
    components: {
        WForm,
    },
    data() {
        return {
            store: useStore(),
            catalog: {
                panelList: [],
                panelson: [],
                FormData: {
                    resourcemc: null,
                    deptid: null,
                    configrationid: null,
                    fwlx: null,
                    bl: null,
                    fbl: null,
                    kssj: null,
                    jssj: null,
                    sjbh: null,
                    pageNo: 1,
                    rows: 0,
                },
            },
            jbxxList: {
                Data: [],
            },
            dict: {
                FwlxList: [],
                blxList: [],
                cklxList: [],
                ZbxList: [],
                BlList: [],
                ZytgList: [],
                GxlxList: [],
                GxfwList: [],
                GxzqList: [],
                FblList: [],
            },
            panelList: [],
            administrativeTree: [],
        };
    },
    created() {
        API.getUrlDataApi("/dm/xzqh/treeData").then((res) => {
            this.administrativeTree = res;
        });
        API.getUrlDataApi("/system/dict/data/getDictItems/t_jbxx_fwlx").then(
            (res) => {
                this.dict.FwlxList = res.data;
            }
        );
        API.getUrlDataApi("/system/dict/data/getDictItems/t_jbxx_bl").then(
            (res) => {
                this.dict.BlList = res.data;
            }
        );
        API.getUrlDataApi("/system/dict/data/getDictItems/t_jbxx_zbx").then(
            (res) => {
                this.dict.ZbxList = res.data;
            }
        );
        API.getUrlDataApi("/system/dict/data/getDictItems/t_jbxx_cklx").then(
            (res) => {
                this.dict.CklxList = res.data;
            }
        );
        API.getUrlDataApi("/system/dict/data/getDictItems/t_jbxx_fbl").then(
            (res) => {
                this.dict.FblList = res.data;
            }
        );
        API.getUrlDataApi(
            "/system/dict/data/getDictItems/t_catalog_jbxxb_sharetype"
        ).then((res) => {
            this.dict.GxlxList = res.data;
        });
        API.getUrlDataApi(
            "/system/dict/data/getDictItems/t_catalog_jbxxb_sharescope"
        ).then((res) => {
            this.dict.GxfwList = res.data;
        });
        API.getUrlDataApi(
            "/system/dict/data/getDictItems/t_catalog_jbxxb_gxzq"
        ).then((res) => {
            this.dict.GxzqList = res.data;
        });
        API.getUrlDataApi("/system/dict/data/getDictItems/t_jbxx_dept").then(
            (res) => {
                this.dict.ZytgList = res.data;
            }
        );
        API.postUrlDataApi("/catalog/configration/list", {
            catalogbm: "",
            catalogmc: "",
            cataloglx: "",
            configtype: "",
        }).then((res) => {
            this.panelList = res;
            let lists = res.filter((p) => p.cataloglen == 0);
            let index = lists.findIndex(
                (e) => e.catalogmc == "黄石公安资源目录"
            );
            lists.splice(index, 1);
            this.catalog.panelList = lists;
        });
    },
    mounted() {
        API.getUrlDataApi(
            "/search/searchResourceByDB",
            this.catalog.FormData
        ).then((res) => {
            this.catalog.FormData.pageNo = res.pageNo;
            this.catalog.FormData.rows = res.rows;
            res.jbxxList.forEach((element) => {
                // 行政区划
                let xzqhName = this.administrativeTree.filter(
                    (c) => c.id == element.xzqh
                );
                if (xzqhName.length > 0) {
                    element.xzqhName = xzqhName[0].name;
                } else {
                    element.xzqhName = "";
                }
                // 资源目录
                let catalogName = this.panelList.filter(
                    (c) => c.id == element.configrationid
                );
                if (catalogName.length > 0) {
                    element.catalogName = catalogName[0].catalogmc;
                } else {
                    element.catalogName = "";
                }
                // 共享类型
                let sharetypeName = this.dict.GxlxList.filter(
                    (c) => c.dictValue == element.sharetype
                );
                if (sharetypeName.length > 0) {
                    element.sharetypeName = sharetypeName[0].dictLabel;
                } else {
                    element.sharetypeName = "";
                }
                // 服务类型
                let fwlxName = this.dict.FwlxList.filter(
                    (c) => c.dictValue == element.fwlx
                );
                if (fwlxName.length > 0) {
                    element.fwlxName = fwlxName[0].dictLabel;
                } else {
                    element.fwlxName = "";
                }
                //  比例
                let blName = this.dict.BlList.filter(
                    (c) => c.dictValue == element.bl
                );
                if (blName.length > 0) {
                    element.blName = blName[0].dictLabel;
                } else {
                    element.blName = "";
                }
                //  分辨率
                let fblName = this.dict.FblList.filter(
                    (c) => c.dictValue == element.fbl
                );
                if (fblName.length > 0) {
                    element.fblName = fblName[0].dictLabel;
                } else {
                    element.fblName = "";
                }
                //  坐标系
                let zbxName = this.dict.ZbxList.filter(
                    (c) => c.dictValue == element.zbx
                );
                if (zbxName.length > 0) {
                    element.zbxName = zbxName[0].dictLabel;
                } else {
                    element.zbxName = "";
                }
                //  参考类型
                let cklxName = this.dict.CklxList.filter(
                    (c) => c.dictValue == element.cklx
                );
                if (cklxName.length > 0) {
                    element.cklxName = cklxName[0].dictLabel;
                } else {
                    element.cklxName = "";
                }
                //  更新频率
                let gxzqName = this.dict.GxzqList.filter(
                    (c) => c.dictValue == element.gxzq
                );
                if (gxzqName.length > 0) {
                    element.gxzqName = gxzqName[0].dictLabel;
                } else {
                    element.gxzqName = "";
                }
            });
            this.jbxxList.Data = res.jbxxList;
            console.log(this.jbxxList.Data);
        });
    },
    methods: {
        catalogChange(item) {
            if (item == undefined) {
                this.catalog.panelson = [];
                return;
            }
            API.getUrlDataApi("/catalog/configration/showCatalog/", {
                catalogbm: item.catalogbm,
            }).then((res) => {
                let newarr = res.filter((p) => p.id !== item.id);
                this.catalog.panelson = newarr;
            });
        },
        // 重置
        Reset() {
            this.catalog.FormData.resourcemc = "";
        },
        Search(e) {
            API.getUrlDataApi(
                "/search/searchResourceByDB",
                this.catalog.FormData
            ).then((res) => {
                this.catalog.FormData.pageNo = res.pageNo;
                this.catalog.FormData.rows = res.rows;
                res.jbxxList.forEach((element) => {
                    // 共享类型
                    let sharetypeName = this.dict.GxlxList.filter(
                        (c) => c.dictValue == element.sharetype
                    );
                    if (sharetypeName.length > 0) {
                        element.sharetypeName = sharetypeName[0].dictLabel;
                    } else {
                        element.sharetypeName = "";
                    }
                    // 服务类型
                    let fwlxName = this.dict.FwlxList.filter(
                        (c) => c.dictValue == element.fwlxName
                    );
                    if (fwlxName.length > 0) {
                        element.fwlxName = fwlxName[0].dictLabel;
                    } else {
                        element.fwlxName = "";
                    }
                    //  比例
                    let blName = this.dict.BlList.filter(
                        (c) => c.dictValue == element.bl
                    );
                    if (blName.length > 0) {
                        element.blName = blName[0].dictLabel;
                    } else {
                        element.blName = "";
                    }
                    //  分辨率
                    let fblName = this.dict.FblList.filter(
                        (c) => c.dictValue == element.fbl
                    );
                    if (fblName.length > 0) {
                        element.fblName = fblName[0].dictLabel;
                    } else {
                        element.fblName = "";
                    }
                    //  坐标系
                    let zbxName = this.dict.ZbxList.filter(
                        (c) => c.dictValue == element.zbx
                    );
                    if (zbxName.length > 0) {
                        element.zbxName = zbxName[0].dictLabel;
                    } else {
                        element.zbxName = "";
                    }
                    //  参考类型
                    let cklxName = this.dict.CklxList.filter(
                        (c) => c.dictValue == element.cklx
                    );
                    if (cklxName.length > 0) {
                        element.cklxName = cklxName[0].dictLabel;
                    } else {
                        element.cklxName = "";
                    }
                    //  更新频率
                    let gxzqName = this.dict.GxzqList.filter(
                        (c) => c.dictValue == element.gxzq
                    );
                    if (gxzqName.length > 0) {
                        element.gxzqName = gxzqName[0].dictLabel;
                    } else {
                        element.gxzqName = "";
                    }
                });
                this.jbxxList.Data = res.jbxxList;
            });
        },
        expand(e) {
            API.getUrlDataApi("catalog/configration/findCatalog", {
                id: e.id,
            }).then((res) => {
                if (e.children) {
                    ``;
                } else {
                    e.children = res;
                }
                e.open = !e.open;
            });
            this.catalog.FormData.configrationid = e.id;
            this.catalog.FormData.pageNo = 1;
            API.getUrlDataApi(
                "/search/searchResourceByDB",
                this.catalog.FormData
            ).then((res) => {
                this.catalog.FormData.pageNo = res.pageNo;
                this.catalog.FormData.rows = res.rows;

                res.jbxxList.forEach((element) => {
                    // 共享类型
                    let sharetypeName = this.dict.GxlxList.filter(
                        (c) => c.dictValue == element.sharetype
                    );
                    if (sharetypeName.length > 0) {
                        element.sharetypeName = sharetypeName[0].dictLabel;
                    } else {
                        element.sharetypeName = "";
                    }
                    // 服务类型
                    let fwlxName = this.dict.FwlxList.filter(
                        (c) => c.dictValue == element.fwlxName
                    );
                    if (fwlxName.length > 0) {
                        element.fwlxName = fwlxName[0].dictLabel;
                    } else {
                        element.fwlxName = "";
                    }
                    //  比例
                    let blName = this.dict.BlList.filter(
                        (c) => c.dictValue == element.bl
                    );
                    if (blName.length > 0) {
                        element.blName = blName[0].dictLabel;
                    } else {
                        element.blName = "";
                    }
                    //  分辨率
                    let fblName = this.dict.FblList.filter(
                        (c) => c.dictValue == element.fbl
                    );
                    if (fblName.length > 0) {
                        element.fblName = fblName[0].dictLabel;
                    } else {
                        element.fblName = "";
                    }
                    //  坐标系
                    let zbxName = this.dict.ZbxList.filter(
                        (c) => c.dictValue == element.zbx
                    );
                    if (zbxName.length > 0) {
                        element.zbxName = zbxName[0].dictLabel;
                    } else {
                        element.zbxName = "";
                    }
                    //  参考类型
                    let cklxName = this.dict.CklxList.filter(
                        (c) => c.dictValue == element.cklx
                    );
                    if (cklxName.length > 0) {
                        element.cklxName = cklxName[0].dictLabel;
                    } else {
                        element.cklxName = "";
                    }
                    //  更新频率
                    let gxzqName = this.dict.GxzqList.filter(
                        (c) => c.dictValue == element.gxzq
                    );
                    if (gxzqName.length > 0) {
                        element.gxzqName = gxzqName[0].dictLabel;
                    } else {
                        element.gxzqName = "";
                    }
                });
                this.jbxxList.Data = res.jbxxList;
            });
        },
        pageChange(page) {
            this.catalog.FormData.pageNo = page;
            API.getUrlDataApi(
                "/search/searchResourceByDB",
                this.catalog.FormData
            ).then((res) => {
                this.catalog.FormData.pageNo = res.pageNo;
                this.catalog.FormData.rows = res.rows;
                res.jbxxList.forEach((element) => {
                    // 共享类型
                    let sharetypeName = this.dict.GxlxList.filter(
                        (c) => c.dictValue == element.sharetype
                    );
                    if (sharetypeName.length > 0) {
                        element.sharetypeName = sharetypeName[0].dictLabel;
                    } else {
                        element.sharetypeName = "";
                    }
                    // 服务类型
                    let fwlxName = this.dict.FwlxList.filter(
                        (c) => c.dictValue == element.fwlxName
                    );
                    if (fwlxName.length > 0) {
                        element.fwlxName = fwlxName[0].dictLabel;
                    } else {
                        element.fwlxName = "";
                    }
                    //  比例
                    let blName = this.dict.BlList.filter(
                        (c) => c.dictValue == element.bl
                    );
                    if (blName.length > 0) {
                        element.blName = blName[0].dictLabel;
                    } else {
                        element.blName = "";
                    }
                    //  分辨率
                    let fblName = this.dict.FblList.filter(
                        (c) => c.dictValue == element.fbl
                    );
                    if (fblName.length > 0) {
                        element.fblName = fblName[0].dictLabel;
                    } else {
                        element.fblName = "";
                    }
                    //  坐标系
                    let zbxName = this.dict.ZbxList.filter(
                        (c) => c.dictValue == element.zbx
                    );
                    if (zbxName.length > 0) {
                        element.zbxName = zbxName[0].dictLabel;
                    } else {
                        element.zbxName = "";
                    }
                    //  参考类型
                    let cklxName = this.dict.CklxList.filter(
                        (c) => c.dictValue == element.cklx
                    );
                    if (cklxName.length > 0) {
                        element.cklxName = cklxName[0].dictLabel;
                    } else {
                        element.cklxName = "";
                    }
                    //  更新频率
                    let gxzqName = this.dict.GxzqList.filter(
                        (c) => c.dictValue == element.gxzq
                    );
                    if (gxzqName.length > 0) {
                        element.gxzqName = gxzqName[0].dictLabel;
                    } else {
                        element.gxzqName = "";
                    }
                });
                this.jbxxList.Data = res.jbxxList;
            });
        },
        Details(item) {
            this.store.dispatch("getCatalogDetails", item);
            this.$router.push("/catalog/data_details");
        },
    },
};
</script>
<style lang="less" scoped>
.retrieve {
    display: flex;
    .left-tree {
        min-width: 170px;
        width: 270px;
        .retrieve-tree-son {
            border-bottom: 1px solid rgb(233, 233, 233);
            .sp1 {
                display: block;
                height: 34px;
                line-height: 34px;
                padding-left: 16px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                cursor: pointer;
            }
            .sp1:hover {
                background-color: rgb(233, 233, 233);
            }
            .retrieve-tree-son-wrap {
                max-height: 500px;
                overflow: auto;
                margin: 0px;
                .retrieve-tree-son-wrap-son {
                    height: 28px;
                    line-height: 28px;
                    cursor: pointer;
                    .span {
                        display: block;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }
                .retrieve-tree-son-wrap-son:hover {
                    background-color: rgb(245, 245, 245);
                }
            }
        }
        .retrieve-tree-son-ac {
            background-color: rgb(233, 233, 233);
        }
    }
    .right-content {
        flex: 1;
        padding: 16px;
        margin-left: 10px;
        background-color: #fff;
        .content-table {
            .table-item {
                padding: 10px;
                border-bottom: 1px solid #e3e4e6;
                cursor: pointer;
                .title-box {
                    display: flex;
                    justify-content: space-between;
                    .title-sp {
                        padding-left: 5px;
                        display: flex;
                        align-items: center;
                        font-weight: 600;
                        position: relative;
                    }
                    .title-sp::before {
                        display: block;
                        content: "";
                        width: 5px;
                        height: 24px;
                        margin-right: 12px;
                        background-color: #5175f6;
                    }
                    .title-fw {
                        color: #48bb78;
                        padding: 1px 6px 1px 6px;
                        background-color: #c6f6d5;
                    }
                }
                .content-Date {
                    margin: 5px 0;
                    color: #666;
                }
                .content-box {
                    color: #333;
                    margin-bottom: 5px;
                    span {
                        margin-right: 30px;
                        color: rgb(136, 136, 136);
                    }
                }
                .tags-box {
                    background-color: #f4f4f4;
                    border: 1px solid #ddd;
                    color: #444;
                    padding: 1px 5px;
                    margin-bottom: 5px;
                    font-size: 12px;
                }
            }
            .table-item:hover {
                background: #f0f1f3;
            }
        }
        .content-page {
            margin-top: 10px;
            display: flex;
            justify-content: flex-end;
        }
    }
}
/deep/ .ant-collapse-content .ant-collapse-content-box {
    padding: 0px;
}
</style>